<!-- 优惠劵列表  -->
<template>
	<view class="page_box">
		<view class="content_box">
			<view class="coupon-list" v-for="(c, index) in couponList" :key="index">
				<view class="coupon-wrap">
					<view class="coupon-item x-bc">
						<view class="coupon-left y-start ">
							<view class="sum-box">
								<text class="unit">{{ c.title }}</text>
							</view>
							<!-- <view class="notice">￥{{c.price}}</view> -->
							<view class="notice">有效期：</view>
							<view class="notice">{{ c.start_time }} 至 {{ c.end_time }}</view>
						</view>
						<view class="flex flex-wrap justify-center align-center">
							<view class="coupon-right y-f">
								<button class="cu-btn get-btn" v-if="c.state == 0" @tap.stop="toCouponDetail(c)">
									详情
								</button>
								<button class="cu-btn get-btn" :class="{ active: c.state == 1 }" v-if="c.state == 1">
									已使用
								</button>
							</view>
							<view class="coupon-right y-f mt15">
								<button class="cu-btn get-btnn" open-type="share" @click="shoare(c.id)">转增</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 空白页 -->
			<shopro-empty v-if="!couponList.length && !isLoading" :emptyData="emptyData"></shopro-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="couponList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />

			<!-- load -->
			<shopro-load v-model="isLoading"></shopro-load>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>

		<!-- 模态框提示 -->
		<u-modal v-model="showModel" :content="itemDetail.text" :show-title="false"></u-modal>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			stateCurrent: 0,
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/empty_goods.png',
				tip: '暂无数据~'
			},
			listParams: {
				page: 1
			},
			isLoading: true, //loading和空白页。
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			couponList: [],

			show: false,
			showModel: false,
			showImg: '',
			itemDetail: {},
			are: '',
			shareInfo: {}
		};
	},
	// 触底加载更多
	onReachBottom() {
		if (this.listParams.page < this.lastPage) {
			this.listParams.page += 1;
			this.getCouponList();
		}
	},
	computed: {},
	onLoad() {
		const shareInfo = uni.getStorage({ key: 'shareInfo' });
		this.getCouponList();
	},
	onShareAppMessage(e) {
		console.log('this.are :>> ', this.are);
		if (this.are) {
			return {
				title: this.shareInfo.title + this.are,
				path: 'pages/index/index?id=' + this.are,
				imageUrl: this.shareInfo.imageUrl, //显示图片长宽比是 5:4
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {
					}
				}
			};
		}
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getCouponList() {
			let that = this;
			that.isLoading = true;
			that.loadStatus = 'loading';
			that.$apiBase('indexOrder', that.listParams).then(res => {
				that.isLoading = false;
				if (res.code === 1) {
					that.couponList = [...that.couponList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.listParams.page < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
		async shoare(e) {
			this.are = e;
		},

		//跳转优惠券详情
		toCouponDetail(data) {
			// this.showImg = data.img
			this.showModel = true;
			this.itemDetail = data;
			// uni.navigateTo({
			// 	url: `./detail1?id=${data.id}`
			// })
		}
	}
};
</script>

<style lang="scss">
.page_box {
	background: #fff;
	height: auto;
}
.coupon-nav {
	background: #fff;
	height: 100rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #fff;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}
.coupon-list {
	margin: 30rpx 20rpx;
}

.coupon-wrap {
	background: url($IMG_URL+'/imgs/coupon_bg1.png') no-repeat;
	background-size: 100% 100%;
	position: relative;
	border-radius: 10rpx;
	width: 710rpx;
	.coupon-item {
		width: 100%;
		height: 168rpx;
		border-radius: 10rpx;

		.coupon-left {
			height: 100%;
			justify-content: center;
			padding-left: 40rpx;

			.unit {
				font-size: 24rpx;
				color: #4f3a1e;
			}

			.sum {
				font-size: 55rpx;
				font-weight: bold;
				color: #4f3a1e;
				line-height: 55rpx;
				padding-right: 10rpx;
			}

			.sub {
				font-size: 26rpx;
				color: #4f3a1e;
			}

			.notice {
				font-size: 22rpx;
				color: #a8700d;
				margin-top: 6rpx;
			}
		}

		.coupon-right {
			height: 100%;
			width: 220rpx;
			justify-content: center;
			align-items: center;

			.get-btn {
				width: 142rpx;
				height: 54rpx;
				background: linear-gradient(90deg, rgba(45, 34, 17, 1), rgba(84, 62, 32, 1));
				box-shadow: 0px 2rpx 5rpx 0px rgba(206, 158, 106, 0.46);
				border-radius: 27rpx;
				padding: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(239, 197, 130, 1);
				&.active {
					background: #666;
				}
			}
			.get-btnn {
				width: 142rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #ffffff, #ffffff);
				box-shadow: 0px 2rpx 5rpx 0px #ffffff;
				border-radius: 27rpx;
				padding: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
				// color: rgba(239, 197, 130, 1);
				&.active {
					background: #000;
				}
			}

			.surplus-num {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
				margin-top: 14rpx;
			}
		}
	}
}
</style>
